<script setup>
import { ref, provide, computed } from 'vue';
import ParentToChild from '@components/subcomponents/ParentToChild.vue';
import ChildToParent from '@components/subcomponents/ChildToParent.vue';
import SiblingComm from '@components/subcomponents/SiblingComm.vue';
import ProvideInjectDemo from '@components/subcomponents/ProvideInjectDemo.vue';

// 用于子组件向父组件通信
const childMessage = ref('');
const handleChildMessage = (message) => {
  childMessage.value = message;
};

// 用于 provide/inject 演示
const globalTheme = ref('light');
const toggleTheme = () => {
  globalTheme.value = globalTheme.value === 'light' ? 'dark' : 'light';
};

// provide 全局数据
provide('theme', globalTheme);
provide('toggleTheme', toggleTheme);

// 当前激活的演示标签
const activeDemo = ref('props');
</script>

<template>
  <div class="component-comm-demo" :class="{ 'dark-mode': globalTheme === 'dark' }">
    <h2 class="demo-title">🔄 Vue 3 组件通信演示</h2>
    
    <!-- 主题切换按钮 -->
    <button class="theme-toggle" @click="toggleTheme">
      切换到 {{ globalTheme === 'light' ? '暗色' : '亮色' }} 主题
    </button>
    
    <!-- 演示标签页 -->
    <div class="tabs">
      <button 
        v-for="tab in ['props', 'emit', 'sibling', 'provide']" 
        :key="tab"
        class="tab-button"
        :class="{ active: activeDemo === tab }"
        @click="activeDemo = tab"
      >
        {{ 
          tab === 'props' ? 'Props 传值' :
          tab === 'emit' ? 'Emit 事件' :
          tab === 'sibling' ? '兄弟组件' :
          'Provide/Inject' 
        }}
      </button>
    </div>
    
    <!-- 演示内容区域 -->
    <div class="demo-content">
      <!-- Props 父传子 -->
      <div v-show="activeDemo === 'props'" class="demo-section">
        <h3>Props 父组件向子组件传递数据</h3>
        <p>父组件可以通过 props 将数据传递给子组件</p>
        <ParentToChild 
          :message="'这是通过 props 传递的消息'"
          :user="{ name: 'Vue开发者', age: 25 }"
          :items="['Vue 3', 'React', 'Angular']"
        />
      </div>
      
      <!-- Emit 子传父 -->
      <div v-show="activeDemo === 'emit'" class="demo-section">
        <h3>Emit 子组件向父组件传递事件</h3>
        <p>子组件可以通过 emit 触发父组件的事件</p>
        <ChildToParent @send-message="handleChildMessage" />
        <div class="message-display" v-if="childMessage">
          <strong>从子组件收到的消息：</strong>{{ childMessage }}
        </div>
      </div>
      
      <!-- 兄弟组件通信 -->
      <div v-show="activeDemo === 'sibling'" class="demo-section">
        <h3>兄弟组件通信演示</h3>
        <p>通过父组件作为中间层实现兄弟组件之间的数据传递</p>
        <SiblingComm />
      </div>
      
      <!-- Provide/Inject -->
      <div v-show="activeDemo === 'provide'" class="demo-section">
        <h3>Provide/Inject 跨层级组件通信</h3>
        <p>适用于深层嵌套组件之间的数据传递</p>
        <ProvideInjectDemo />
      </div>
    </div>
    
    <!-- 组件通信总结 -->
    <div class="summary">
      <h3>Vue 3 组件通信方式总结</h3>
      <div class="summary-grid">
        <div class="summary-card">
          <h4>Props</h4>
          <ul>
            <li>✅ 父组件向子组件传递数据</li>
            <li>✅ 支持多种数据类型</li>
            <li>✅ 可以设置验证规则</li>
          </ul>
        </div>
        <div class="summary-card">
          <h4>Emit</h4>
          <ul>
            <li>✅ 子组件向父组件发送事件</li>
            <li>✅ 可以传递参数</li>
            <li>✅ 支持自定义事件名称</li>
          </ul>
        </div>
        <div class="summary-card">
          <h4>Provide/Inject</h4>
          <ul>
            <li>✅ 跨层级组件通信</li>
            <li>✅ 避免 props 逐级透传</li>
            <li>✅ 适合全局状态共享</li>
          </ul>
        </div>
        <div class="summary-card">
          <h4>状态管理</h4>
          <ul>
            <li>✅ 复杂应用推荐 Pinia</li>
            <li>✅ 集中管理全局状态</li>
            <li>✅ 支持模块化和持久化</li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</template>

<style scoped>
.component-comm-demo {
  animation: fadeIn 0.5s ease-in-out;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.component-comm-demo.dark-mode {
  background-color: #1a1a1a;
  color: #e0e0e0;
}

.component-comm-demo.dark-mode .demo-section {
  background-color: #2d2d2d;
}

.component-comm-demo.dark-mode .summary-card {
  background-color: #2d2d2d;
  border-color: #444;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.demo-title {
  font-size: 2rem;
  margin-bottom: 1rem;
  text-align: center;
}

.theme-toggle {
  display: block;
  margin: 0 auto 2rem;
  background: #667eea;
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 30px;
  cursor: pointer;
  transition: background 0.3s ease;
}

.theme-toggle:hover {
  background: #764ba2;
}

.tabs {
  display: flex;
  gap: 1rem;
  justify-content: center;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.tab-button {
  padding: 0.8rem 1.5rem;
  border: none;
  background: #f0f0f0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.3s ease;
  font-weight: 500;
}

.dark-mode .tab-button {
  background: #333;
  color: #e0e0e0;
}

.tab-button.active {
  background: #667eea;
  color: white;
}

.demo-content {
  min-height: 300px;
}

.demo-section {
  background: white;
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  margin-bottom: 2rem;
  animation: slideIn 0.3s ease;
}

.dark-mode .demo-section {
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.demo-section h3 {
  color: #667eea;
  margin-bottom: 1rem;
}

.dark-mode .demo-section h3 {
  color: #8a95ff;
}

.message-display {
  margin-top: 1.5rem;
  padding: 1rem;
  background: #e3f2fd;
  border-radius: 8px;
  border-left: 4px solid #2196f3;
}

.dark-mode .message-display {
  background: #1e3a8a;
  border-left-color: #3b82f6;
}

.summary {
  margin-top: 3rem;
}

.summary h3 {
  text-align: center;
  margin-bottom: 2rem;
  color: #667eea;
}

.dark-mode .summary h3 {
  color: #8a95ff;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1.5rem;
}

.summary-card {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
  border: 1px solid #eee;
}

.summary-card h4 {
  color: #333;
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.dark-mode .summary-card h4 {
  color: #e0e0e0;
}

.summary-card ul {
  list-style: none;
  padding: 0;
}

.summary-card li {
  padding: 0.5rem 0;
  border-bottom: 1px solid #eee;
  font-size: 0.95rem;
}

.dark-mode .summary-card li {
  border-bottom-color: #444;
}

.summary-card li:last-child {
  border-bottom: none;
}

@media (max-width: 768px) {
  .demo-title {
    font-size: 1.6rem;
  }
  
  .tabs {
    flex-direction: column;
  }
  
  .tab-button {
    width: 100%;
  }
  
  .demo-section {
    padding: 1.5rem;
  }
  
  .summary-grid {
    grid-template-columns: 1fr;
  }
}
</style>